<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">

<h:body>
	<ui:composition template="/pages/templates/MainTemplate.xhtml">
		<ui:define name="content">
			<div id="users_table_wrapper">
				<h:form id="form">
					<p:dataTable id="users" var="user" value="#{userManagerMB.userList}" rowKey="#{user.id}" selection="#{userManagerMB.selectedUser}"
						selectionMode="single" style="table-layout: fixed;">
						<p:ajax event="rowSelect" listener="#{userManagerMB.rowSelected}" oncomplete="handleRowSelectedComplete(xhr, status, args)" 
							update=":editForm:display :editForm:messages :form:users" />
						<f:facet name="header">
							Lista de usuarios
						</f:facet>
						<p:column headerText="Est." style="width:20px">
							#{user.active}
						</p:column>
						<p:column headerText="Email" style="width:100px">
							#{user.email}
						</p:column>
						<p:column headerText="Nombre" style="width:100px">
							#{user.firstName}
						</p:column>
						<p:column headerText="Apellido" style="width:100px">
							#{user.lastName}
						</p:column>
						<p:column headerText="Roles" style="width:400px">
							#{user.roles}
						</p:column>
						<f:facet name="footer">
							<p:commandButton id="viewButton" value="Editar" rendered="#{userManagerMB.rowSelected}" icon="ui-icon-search" process="@this" ajax="true"
								oncomplete="editPanel.show()" />
							<p:commandButton id="addButton" value="Nuevo" rendered="#{empty userManagerMB.newUser}" icon="ui-icon-circle-puls" process="@this" oncomplete="editPanel.show()"
								actionListener="#{userManagerMB.newUser}" update=":editForm:display :form:users" />
						</f:facet>
					</p:dataTable>
				</h:form>
			</div>
			<div id="user_edit_form_wrapper">
				<h:form id="editForm">
					<p:growl id="messages" showDetail="true" />
					<p:panel widgetVar="editPanel" header="Editar Usuario" visible="flase" closable="true" toggleable="true">
						<p:ajax event="close" listener="#{userManagerMB.handleClose}" update=":form:users" />
						<p:panelGrid id="display" style="margin-bottom:20px; width:100%;">
							<p:row>
								<p:column>
									<h:outputLabel for="firstname" value="Nombre" />
								</p:column>
								<p:column>
									<h:inputText id="firstname" maxlength="20" size="40" value="#{userManagerMB.selectedUser.firstName}" required="true" label="Nombre" />
								</p:column>
								<p:column>
									<p:message for="firstname" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<h:outputLabel for="middlename" value="Segundo Nom." />
								</p:column>
								<p:column>
									<h:inputText id="middlename" maxlength="20" size="40" value="#{userManagerMB.selectedUser.middlename}" label="Segundo Nom." />
								</p:column>
								<p:column>
									<p:message for="middlename" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<h:outputLabel for="surname" value="Apellido" />
								</p:column>
								<p:column>
									<h:inputText id="surname" maxlength="20" size="40" value="#{userManagerMB.selectedUser.lastName}" required="true" label="Apellido" />
								</p:column>
								<p:column>
									<p:message for="surname" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<h:outputLabel for="notemail" value="Email" />
								</p:column>
								<p:column>
									<h:inputText id="notemail" disabled="#{userManagerMB.newUser == null}" maxlength="40" size="40" value="#{userManagerMB.selectedUser.email}" required="true" validatorMessage="Formato invalido">
										<f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
									</h:inputText>
								</p:column>
								<p:column>
									<p:message id="email_message" for="notemail" />
								</p:column>
							</p:row>
							<p:row>
								<p:column>
									<h:outputLabel for="contrasena" value="Contrase&ntilde;a" />
								</p:column>
								<p:column>
									<p:password feedback="true" goodLabel="Seguridad media" weakLabel="Seguridad baja" strongLabel="Seguridad Alta" redisplay="true"
										id="contrasena" size="40" value="#{userManagerMB.selectedUser.password}" required="true" autocomplete="off" label="Contrase&ntilde;a">
										<f:validateLength minimum="4" maximum="20"></f:validateLength>
									</p:password>
								</p:column>
								<p:column>
									<p:message for="contrasena" />
								</p:column>
							</p:row>
							<p:row>
								<p:column colspan="3" styleClass="ui-widget-header">
									<p:spacer height="0">Roles</p:spacer>
								</p:column>
							</p:row>
							<p:row>
								<p:column colspan="3">
									<p:pickList id="pickList" value="#{userManagerMB.roles}" var="role" itemLabel="#{role}" itemValue="#{role}" converter="RoleConverter" />
								</p:column>
							</p:row>
							<f:facet name="footer">
								<p:row>
									<p:column colspan="2" styleClass="ui-widget-header">
										<p:commandButton value="Desactivar" immediate="true" rendered="#{userManagerMB.activeUser}" onclick="confirmation.show()" />
										<p:commandButton value="Activar" immediate="true" rendered="#{!userManagerMB.activeUser}" update=":editForm:messages :form:users"
											actionListener="#{userManagerMB.activarUsuario}" />
									</p:column>
									<p:column>
										<p:commandButton value="Guardar" actionListener="#{userManagerMB.saveSelectedUser}"
											update=":form:users :editForm:messages :editForm:display" oncomplete="handleSaveEditionBeforeClose(xhr, status, args)" />
										<p:commandButton value="Cerrar" actionListener="#{userManagerMB.closeUserEdition}" async="true" process="@form"
											oncomplete="handleComplete(xhr, status, args)" />
									</p:column>
								</p:row>
							</f:facet>
						</p:panelGrid>
					</p:panel>
					<p:confirmDialog id="confirmDialog" message="Esta seguro de desactivar el usuario?" header="Eliminar usuario" severity="alert"
						widgetVar="confirmation">
						<p:commandButton id="confirm" value="Si" update=":editForm:messages :form:users" actionListener="#{userManagerMB.deleteSelectedUser}"
							oncomplete="confirmation.hide()" immediate="true" />
						<p:commandButton id="decline" value="No" onclick="confirmation.hide()" type="button" immediate="true" />
					</p:confirmDialog>
					<p:confirmDialog id="leaveDialog" message="El usuario ha sido modificado desea guardar los datos?" header="Usuario modificado" severity="alert"
						widgetVar="leaveUser">
						<p:commandButton id="saveEditingUser" value="Si" update=":editForm:messages :form:users :editForm:display" actionListener="#{userManagerMB.saveSelectedUser}"
							oncomplete="handleSaveEditionBeforeClose(xhr, status, args);" />
						<p:commandButton id="continueEditing" value="No" update=":editForm:messages :form:users" actionListener="#{userManagerMB.cancelarEdicion}"
							oncomplete="leaveUser.hide(),editPanel.close()" immediate="true" />
					</p:confirmDialog>
				</h:form>
			</div>
		</ui:define>
	</ui:composition>
</h:body>

</html>
